<template>
  <div class="longin-details">
    <header>
      <div class="left">
        <i @click="back"></i>
        <div>手机号登录</div>
      </div>
    </header>

    <main>
      <div class="field">
        <van-field v-model="phone" placeholder="请输入手机号" />
        <van-field v-model="password" type="password" placeholder="输入密码" />
        <van-field readonly />
      </div>

      <div class="other">
        <div>验证码登录</div>
        <div>忘记密码</div>
      </div>

      <van-button
        :class="[falg ? 'active':'']"
        @click="userLogin(phone,password)"
        round
        type="default"
      >下一步</van-button>
    </main>
  </div>
</template>

<script>
export default {
  name: "LonginDetails",
  data() {
    return {
      phone: "",
      password: ""
    };
  },
  methods: {
    back() {
      this.$router.back(); //后退
    },
    userLogin(phone, password) {
      sessionStorage.setItem(phone, password);

      this.$router.push("/home");
    }
  },
  computed: {
    falg() {
      if (this.phone && this.password) {
        return true;
      }
      return false;
    }
  }
};
</script>

<style lang="scss" scoped>
.longin-details {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  z-index: 100;
  background-color: #ffffff;

  header {
    width: 100vw;
    height: 5vh;

    .left {
      width: 60vw;
      display: flex;
      justify-content: space-between;
      align-items: center;

      i {
        width: 10px;
        height: 10px;
        margin: 20px;
        display: block;
        background-image: url("~@/assets/images/login/icon_back.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
      }

      div {
        font-weight: bolder;
      }
    }
  }

  main {
    width: 100vw;
    margin: 40px 0;

    .field {
      width: 90vw;
      margin: 0 auto;

      ::v-deep .van-cell {
        &::after {
          height: 2px;
          background-color: #efefef;
        }
      }
    }

    .other {
      width: 80vw;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
    }

    .van-button {
      width: 90vw;
      display: block;
      margin: 60px auto;
      font-size: 16px;
      font-weight: bolder;
      color: #cccccc;
      background-color: #f5f5f5;
    }

    .active {
      color: rgb(255, 255, 255);
      background-color: #14c4bc;
    }
  }
}
</style>